<template>
  <a-layout-sider width="220" style="background: #fff">
    <a-menu v-model:selectedKeys="selectedKeys2" v-model:openKeys="openKeys" mode="inline"
      :style="{ height: '100%', borderRight: 1 }">
      <a-sub-menu key="sub1">
        <template #title>
          <span class="flex items-center">
            <BugOutlined class="mr-2"/>
            入侵物种
          </span>
        </template>
        <a-menu-item key="2"><router-link to="/popsci/directory">入侵物种名录</router-link></a-menu-item>
      </a-sub-menu>
    </a-menu>
  </a-layout-sider>
</template>

<script setup lang="ts">
import { BugOutlined } from '@ant-design/icons-vue';
import { ref } from 'vue';

const selectedKeys2 = ref(['2']);
const openKeys = ref(['sub1']);
</script>

<style scoped>
</style>
